<template>
    <div>
        <div class="container">
			<div class="crumbs">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item>
						<i class="el-icon-lx-cascades"></i> 工作室详细配置
					</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<!-- <el-card class="drawer-box-card"> -->
				<el-row :gutter="5" class="row-bg">
					<el-col :span="4">工作室名称</el-col>
					<el-col :span="4">{{workRoomForm.id}} / {{workRoomForm.workRoomName}}</el-col>
					<el-col :span="4">更新时间</el-col>
					<el-col :span="4">{{workRoomForm.createTime}}</el-col>
					<el-col :span="4">工作室状态</el-col>
					<el-col :span="4">
					<el-tag :type="
					workRoomForm.status === 1 ?'success' : workRoomForm.status === '0' ? 'danger' : ''">
					{{ workRoomForm.strStatus }}
					</el-tag></el-col>
				</el-row>
				<el-tabs type="border-card" class="drawer-box-tabs">
					<el-tab-pane label="project">
						<template #label>
							<el-icon></el-icon><span>服务项目</span>
						</template>
						<div class="handle-box">
                			<VServiceProject v-bind:selectValue="workRoomForm.id" @serviceProjectData="loadvServiceProjectData"/>
						</div>
						<!-- 移除From中的项目数据列表
						<el-table :data="workRoomForm.roomProjectVoList" border class="table" ref="multipleTable" header-cell-class-name="table-header">
							<el-table-column type="expand">
								<template #default="scope">
								<el-table :data="scope.row.childProjectVoList" border class="table" ref="multipleTable" header-cell-class-name="table-header">
									<el-table-column prop="cId" label="ID" width="55" align="center"></el-table-column>
									<el-table-column prop="cName" label="服务项目名称" ></el-table-column>
									<el-table-column prop="cDec" label="服务项目描述" ></el-table-column>
									<el-table-column prop="isConfig" label="绑定服务" >
										<template #default="scope">
											<el-tag :type="
											scope.row.isConfig === 1 ? 'success' : 'danger'
											">{{ scope.row.isConfig === 1?'已配置':'未配置' }}
											</el-tag>
										</template>
									</el-table-column>
								</el-table>
								</template>
							</el-table-column>
							<el-table-column prop="pId" label="ID" width="55" align="center"></el-table-column>
							<el-table-column prop="pName" label="服务项目名称" ></el-table-column>
							<el-table-column prop="pDec" label="服务项目描述" ></el-table-column>
						</el-table>
						 -->
					</el-tab-pane>
					<el-tab-pane label="barber">
						<template #label>
							<el-icon></el-icon><span>发型师</span>
						</template>
						<div class="handle-box">
                			<VBarber v-bind:selectValue="workRoomForm.id" @barberData="loadvBarberData"/>
						</div>
						<!-- 移除From中的发型师数据列表 
							<el-table :data="workRoomForm.barberList" border class="table" ref="multipleTable" header-cell-class-name="table-header">
							<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
							<el-table-column label="头像" >
								<template #default="scope">
									<el-image :src="scope.row.headPortrait" />
								</template>
							</el-table-column>
							<el-table-column prop="name" label="名称" ></el-table-column>
							<el-table-column prop="spellName" label="拼音" ></el-table-column>
							<el-table-column prop="grade" label="等级" ></el-table-column>
							<el-table-column prop="phone" label="手机号码" ></el-table-column>
							<el-table-column prop="craftValue" label="手艺值" ></el-table-column>
							<el-table-column prop="workYear" label="工作年限" ></el-table-column>
						</el-table> -->
					</el-tab-pane>
					<el-tab-pane label="price">
						<template #label>
							<el-icon></el-icon><span>价目表</span>
						</template>
						<div class="handle-box">
                			<VBarberProjectPrice v-bind:selectValue="workRoomForm.id" @barberProjectPriceData="loadvBarberProjectPriceData"/>
						</div>
						<!-- <el-table :data="workRoomForm.priceList" border class="table" ref="multipleTable" header-cell-class-name="table-header">
							<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
							<el-table-column v-if="false" prop="workRoomId" label="工作室id" ></el-table-column>
							<el-table-column v-if="false" prop="barberId" label="理发师id" ></el-table-column>
							<el-table-column v-if="false" prop="serviceProjectId" label="服务项目id" ></el-table-column>
							<el-table-column prop="bName" label="理发师名称" ></el-table-column>
							<el-table-column prop="pName" label="服务项目名称" ></el-table-column>
							<el-table-column prop="price" label="服务金额" ></el-table-column>
						</el-table> -->
					</el-tab-pane>

            	</el-tabs>
			<!-- </el-card> -->
        </div>
    </div>
</template>
<script>
import { ref, reactive, toRefs } from "vue";
import { useRouter,useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from "element-plus";
import { fetchWorkRoomDetailData } from "../../../api/hairmanager/workroom";
import { fetchProjectTreeData } from "../../../api/hairmanager/project";
import VBarber from "../components/Barber.vue";
import VServiceProject from "../components/ServiceProject.vue";
import VBarberProjectPrice from "../components/BarberProjectPrice.vue";
export default {
    name: "workroom",
    components: {VBarber, VServiceProject, VBarberProjectPrice},
	created() {

	},
    setup() {
		const router = useRouter();
		const route = useRoute();
        const formLabelWidth = ref("170px");
		const SUCCMESS_BUNDATA_DIALOG_MESSAGE = "绑定数据成功";
        // 发型师选择插件参数
		let barberPriceTableData = ref([]);
		// 服务项目选择插件参数
		let serviceProjectTableData = ref([]);
        const query = reactive({
            keyword: "",
            pageIndex: 1,
            pageSize: 10,
        });
        const workRoomForm = reactive({});
// =========================================================================================
		const getRouterData = ()  => {
			let id = route.query.id;
			fetchWorkRoomDetailData(id).then((res)=>{
                 workRoomForm.value = res.data;
            });
		}
		getRouterData();
		/**
		 * @name 发型师组件回调数据
		 */
        const loadvBarberData = (barberTableData) => {
			ElMessage.success(SUCCMESS_BUNDATA_DIALOG_MESSAGE);
			getRouterData();
        };

		/**
		 * @name 服务项目组件回调数据
		 * @Des 工作室服务项目配置
		 */
        const loadvServiceProjectData = (serviceProjectTableData) => {
			ElMessage.success(SUCCMESS_BUNDATA_DIALOG_MESSAGE);
			getRouterData();
        };
		/**
		 * @name 工作室发型师服务项目价格组件回调数据
		 */
		const loadvBarberProjectPriceData = (barberProjectPriceData) => {
			ElMessage.success(SUCCMESS_BUNDATA_DIALOG_MESSAGE);
			getRouterData();
		};
        return {
            query, workRoomForm, formLabelWidth,
			loadvBarberData, loadvServiceProjectData, loadvBarberProjectPriceData,
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
.el-col {
    border-radius: 4px;
}
.row-bg {
    padding: 0px 0px 0px 0px;
}
</style>